import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useFetch } from '@/composables/useFetch'

export interface ITableAction {
  getTableList: (parmas: any) => Promise<any>
  addTableItem: (parmas: any) => Promise<any>
  updateTableItem: (parmas: any) => Promise<any>
  deleteTableItem: (parmas: any) => Promise<any>
  _handleModel?: (data: any) => any
  _handleEditModel?: (data: any) => any
}

export function useTableAction({ getTableList, addTableItem, updateTableItem, deleteTableItem, _handleModel, _handleEditModel }: ITableAction, searchFormModel?: any, modalFormModel?: any) {
  const dataList = ref<any[]>([])
  const pagination = ref({})
  const route = useRoute()

  // 页面请求
  const { data: listResult, loading: getLoading, execute: getListExecute } = useFetch(parmas => getTableList(parmas))
  const { data: addItemResult, loading: addLoading, execute: addItemExecute } = useFetch(parmas => addTableItem(parmas))
  const { data: updateItemResult, loading: updateLoading, execute: updateItemExecute } = useFetch((parmas: any) => updateTableItem(parmas))
  const { data: deleteItemResult, loading: deleteLoading, execute: deleteItemExecute } = useFetch((parmas: any) => deleteTableItem(parmas))

  onMounted(() => getList(route.query))

  // 时刻监听pageNo和pageSize的变化
  watch([() => route.query?.pageNo, () => route.query?.pageSize], (nVal: any[]) => {
    if (!nVal[0] && !nVal[1])
      return
    const pagination = { pageNo: nVal[0], pageSize: nVal[1] }
    const params = Object.assign({}, pagination, searchFormModel.value || {})
    getList(params)
  }, { immediate: true })

  // 查询case
  async function getList(parmas: any) {
    await getListExecute(parmas)
    const { data, totalCount: total } = listResult.value!
    dataList.value = data
    pagination.value = {
      pageNo: Number(route.query?.pageNo) || 1,
      pageSize: Number(route.query?.pageSize) || 10,
      total,
      hideOnSinglePage: data.length === 0,
    }
  }

  // 编辑case
  function onClickEditForm(model: any) {
    const data = _handleEditModel ? _handleEditModel(model) : model
    modalFormModel?.onClickEditModal(data)
  }

  // 新增修改提交case
  function onClickSubmitModalForm(model: any, action: 'add' | 'edit') {
    model = _handleModel ? _handleModel(model) : model
    if (action === 'add')
      _handleSubmitExecute(addItemExecute, addItemResult)

    else
      _handleSubmitExecute(updateItemExecute, updateItemResult)

    async function _handleSubmitExecute(execute: (model: any) => Promise<void>, result: any) {
      await execute(model)
      if (result.value!.code === 200) {
        window.$message.success(result.value!.message || 'create success!')
        modalFormModel.visible.value = false
        getList(route.query)
      }
    }
  }

  async function onClickDeleteAction(data: any) {
    await deleteItemExecute(data)
    if (deleteItemResult.value!.code === 200) {
      window.$message.success(deleteItemResult.value!.message || 'delete success!')
      getList(route.query)
    }
  }

  return {
    dataList,
    pagination,
    getLoading,
    addLoading,
    updateLoading,
    deleteLoading,
    getList,
    onClickEditForm,
    onClickSubmitModalForm,
    onClickDeleteAction,
  }
}
